import './index.scss'
import { App } from 'antd'
import { useRef, useState } from 'react'
import { useMount, useReactive, useSize } from 'ahooks'
import { ProTable, TableDropdown } from '@ant-design/pro-components'

const data = (num) => {
    const labelsMapping = { 0: 'default', 1: 'processing', 2: 'success', 3: 'warning', 4: 'error' }
    const arr = [...Array(num)].map((_, i) => {
        const labelsData = labelsMapping[Math.floor(Math.random() * 5)]
        return {
            id: i,
            title: `${i + 1} 🐛 [BUG]yarn install命令 antd2.4.5会报错`,
            progress: Math.floor(Math.random() * 100),
            labels: [{ name: labelsData, color: labelsData }],
            locked: false,
            state: labelsData,
            comments: 1,
            created_at: new Date(2024, 0, 1).getTime() + Math.random() * (new Date(2024, 11, 31).getTime() - new Date(2024, 0, 1).getTime()),
        }
    })
    return arr
}

const ProTableTemplate = ({ page }) => {
    const { modal } = App.useApp()
    const actionRef = useRef()
    const ProTableBox = useRef()
    const size = useSize(ProTableBox)

    const [TableConfig, setTableConfig] = useState()
    const InitTable = useReactive({
        pageIndex: 1,
        pageSize: 10
    })

    useMount(() => {
        import(`./ProTable/${page}.jsx`)
            .then(async res => {
                const detailsData = await res.default()
                InitTable.pageIndex = detailsData.pageIndex
                InitTable.pageSize = detailsData.pageSize
                setTableConfig(detailsData)
            })
            .catch((err) => {
                console.log(err)
                modal.info({ title: '当前页面未定义!', content: `当前页面路径--${page}` })
            })
    })
    const getData = async () => ({ data: data(100), success: true, total: 100 })
    return (
        <div className='ProTableTemplate' ref={ProTableBox}>
            {size && TableConfig &&
                <ProTable
                    size='lager'
                    rowSelection
                    columns={TableConfig.columns}
                    actionRef={actionRef}
                    request={getData}
                    rowKey="id"
                    search={{
                        layout: 'vertical',
                        showHiddenNum: true,
                        optionRender: (searchConfig, formProps, dom) => [...dom.reverse()]
                    }}
                    options={{ fullScreen: true, setting: true, density: false, reload: true }}
                    pagination={{
                        current: InitTable.pageIndex,
                        pageSize: InitTable.pageSize,
                        onChange: (index, size) => {
                            InitTable.pageIndex = index
                            InitTable.pageSize = size
                        },
                    }}
                    dateFormatter="string"
                    headerTitle="高级表格"
                    toolBarRender={() => TableConfig.optionsBtn()}
                    scroll={{ x: 1000, y: size.height - 380 }}
                />
            }
        </div>
    )
}
export default ProTableTemplate;